<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html {
                height: 100%;
                width: 100%;
            }
            body {
                height: 100%;
                width: 100%;
                margin: 0; padding: 0; }
            #map_canvas {
                height: 100%;
                margin-left: 20%;
                margin-right: 20%;
            }
        </style>
        <script type="text/javascript">
	        function initialize() {
	        	var myOptions = {
	            	zoom: 8,center: new google.maps.LatLng(-34.397, 150.644),
	            	mapTypeId: google.maps.MapTypeId.ROADMAP
	 	    	}
	 	    	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	 	    }
	        function loadScript() {
	            var script = document.createElement("script");
	            script.type = "text/javascript";
	 	    	script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCvsgM5i6-MrX0uGAS0qPpAdk0-BHf0AIA&sensor=true&callback=initialize";
	 	    	document.body.appendChild(script);
	 	    }
	        window.onload = loadScript;
        </script>
    </head>
    <body>
        <div id="map_canvas"></div>
    </body>
    <h1>Directions</h1>
    <div>{{directions|safe}}</div>
</html>
